<script setup lang="ts">
import PickCoursewareForm from "./pickCouresewareForm.vue";
import { useLmsStoreHook } from "@/store/modules/lms";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { bindCourseware } from "@/api/lms/course";
import Search from "@iconify-icons/ep/search";

const lmsStore = useLmsStoreHook();

const handleClick = (_, row) => {
  console.log(row);
  lmsStore.pickCourseware = lmsStore.pickCourseware.filter(
    item => item.id != row.id
  );
};

const cliPickBtn = () => {
  lmsStore.dialogForPickCourseware = true;
};

const commitForm = () => {
  console.log(lmsStore.pickCourseware);
  const coursewareIds = [];
  lmsStore.pickCourseware.forEach(item => {
    coursewareIds.push(item.id);
  });
  bindCourseware({
    courseId: lmsStore.currCourseInfoDto.baseInfo.id,
    coursewareIds: coursewareIds
  }).then(() => {
    lmsStore.currCourseInfoDto.coursewares = lmsStore.pickCourseware;
    lmsStore.currStep++;
  });
};
defineExpose({
  commitForm
});
</script>

<template>
  <div style="width: 100%">
    <PickCoursewareForm />
    <el-divider content-position="left">课件信息</el-divider>
    <el-table :data="lmsStore.pickCourseware" style="width: 100%">
      <el-table-column prop="code" label="课程编号" />
      <el-table-column prop="name" label="课程名称" />
      <el-table-column prop="label" label="标签" />
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider />
    <el-row>
      <el-button :icon="useRenderIcon(Search)" @click="cliPickBtn"
        >选择课件</el-button
      >
    </el-row>
  </div>
</template>

<style scoped></style>
